<template>
    <div v-loading="loading" v-auto-resize ref="chartEl" class="chart-wrap" />
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'
import { subComponentMixin } from '@/mixins/user-data'

let oChart
export default {
  name: 'ChartStageTrend',
  props: {
    type: {
      type: String,
      required: true
    }
  },
  mixins: [EchartsBase, subComponentMixin],
  directives: {
    AutoResize
  },
  watch: {
    type () {
      this.debounceGetData()
    }
  },
  data () {
    return {
      loading: true
    }
  },
  created () {
    this.debounceGetData()
  },
  methods: {
    getData () {
      this._getUserStageTrend()
    },
    async _getUserStageTrend () {
      this.loading = true
      const { data: { data, code } } =
      await this.$http
        .get(this.getApiUrl('dataanalysis_iot/user/getUserStageTrend', false),
          {
            params: { ...this.requestParams, date_type: this.type }
          })
      this.loading = false
      if (code === 0) {
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          this.setOption(data)
        })
      }
    },
    setOption ({ activeUserList, lostUserList, newAppUserList, silentUserList }) {
      const axisBasic = {
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E9EBF1',
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        }
      }
      const seriesData = [
        {
          name: '新安装设备',
          stack: '总量',
          type: 'bar',
          data: []
        },
        {
          name: '新增用户',
          stack: '总量',
          type: 'bar',
          data: []
        },
        {
          name: '活跃用户',
          stack: '总量',
          type: 'bar',
          data: []
        },
        {
          name: '沉默用户',
          stack: '总量',
          type: 'bar',
          data: []
        },
        {
          name: '流失用户',
          stack: '总量',
          type: 'bar',
          data: []
        }
        // {
        //   name: '平均温度',
        //   type: 'line',
        //   yAxisIndex: 0,
        //   itemStyle: {
        //     color: '#2CD9C5'
        //   },
        //   lineStyle: {
        //     color: '#2CD9C5'
        //   },
        //   data: [2.0, 2.2, 3.3, 8, 6.3, 10.2, 180, 230, 200, 250, 12.0, 6.2]
        // }
      ]
      const xAxisData = []
      for (const { dateTime } of activeUserList) {
        xAxisData.push(dateTime)
      }
      seriesData[1].data = this.handleData(newAppUserList)
      seriesData[2].data = this.handleData(activeUserList)
      seriesData[3].data = this.handleData(silentUserList)
      seriesData[4].data = this.handleData(lostUserList)
      // console.log(seriesData)
      const option = {
        // color: ['#5f3cfd', '#7456fc', '#9e86ff', '#e5d8fd', '#F7D2FF', '#fae4ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999999'
            }
          }
        },
        legend: {
          top: '2%',
          right: '2%',
          data: ['新安装设备', '新增用户', '活跃用户', '沉默用户', '流失用户']
        },
        grid: {
          left: '1%',
          top: '15%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            show: false
          },
          ...axisBasic
        },
        yAxis: {
          type: 'value',
          min: 0,
          axisLabel: {
            color: '#333',
            formatter: '{value} 一 '
          },
          axisLine: {
            lineStyle: {
              color: '#E9EBF1'
            }
          },
          ...axisBasic
        },
        series: seriesData
      }
      oChart.setOption(option)
    },
    handleData (data) {
      const result = []
      for (const { dateTime, ...val } of data) {
        let count = 0
        for (const key of Object.keys(val)) {
          if (key.indexOf('Count')) {
            count = val[key]
          }
        }
        result.push(count)
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
    .chart-wrap {
        width: 100%;
        height: 100%;
    }
</style>
